import { useinitstate } from '@/hooks'
import { AppDispatch } from '@/store'
import { getDetailApi } from '@/store/actions/detail'
import { NavBar } from 'antd-mobile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import style from './index.module.scss'
import { RootState } from '@/store/index'
import { DetailType } from '@/types/data'
function Detail() {
  const location = useLocation()
  const dis = useDispatch<AppDispatch>()
  const nav = useNavigate()
  console.log(location.pathname.split('/')[2])
  const back = () => {
    nav(-1)
  }
  useEffect(() => {
    dis(getDetailApi(+location.pathname.split('/')[2]))
  }, [])
  const { detail } = useSelector((state: RootState) => state.detail)
  const lefts = (
    <div style={{ lineHeight: '45px', verticalAlign: 'middle' }}>
      <img
        src={detail.aut_photo}
        alt=""
        style={{
          height: '45px',
          verticalAlign: 'middle',
          borderRadius: '34px',
        }}
      />
      <span>{detail.aut_name}</span>
      <span>{detail.is_followed ? '已关注' : '未关注'}</span>
    </div>
  )
  return (
    <div className={style.root}>
      <NavBar onBack={back} left={lefts}></NavBar>
      <h2>{detail.title}</h2>
      <div>
        <span>{detail.pubdate}</span>
        <span>{detail.pubdate}阅读</span>
        <span>{detail.pubdate}评论</span>
      </div>
      <div dangerouslySetInnerHTML={{ __html: detail.content }}></div>
    </div>
  )
}

export default Detail
